<%--
  Created by IntelliJ IDEA.
  User: 86131
  Date: 2023/8/8
  Time: 14:58
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="path" value="${pageContext.request.contextPath }"/>
<html>
<head>
    <title>电影分类</title>
    <script rel="script" src="${path}/js/jquery-3.6.4.js"></script>
    <link rel="stylesheet" type="text/css" href="${path}/css/flcontent.css">
</head>
<body>
<c:set value="${sessionScope.pages}" var="pages"></c:set>
    <div id="biao">
        <ul class="title_name">
            <li><span id="rb">正在热映</span></li>
            <li>即将上映</li>
            <li>经典影片</li>
        </ul>
    </div>
    <div id="fl">
        <div class="fe">
            <div>类型：</div>
            <ul class="ul1">
                <li class="quan1" onclick="redType(this)">全部</li>
                <li onclick="redType(this)">爱情</li><li onclick="redType(this)">喜剧</li>
                <li onclick="redType(this)">动画</li><li onclick="redType(this)">剧情</li>
                <li onclick="redType(this)">恐怖</li><li onclick="redType(this)">惊悚</li>
                <li onclick="redType(this)">科幻</li><li onclick="redType(this)">动作</li>
                <li onclick="redType(this)">悬疑</li><li onclick="redType(this)">犯罪</li>
                <li onclick="redType(this)">冒险</li><li onclick="redType(this)">战争</li>
                <li onclick="redType(this)">奇幻</li><li onclick="redType(this)">运动</li>
                <li onclick="redType(this)">黑色电影</li><li onclick="redType(this)">家庭</li>
                <li onclick="redType(this)">古装</li><li onclick="redType(this)">武侠</li>
                <li onclick="redType(this)">西部</li><li onclick="redType(this)">历史</li>
                <li onclick="redType(this)">传记</li><li onclick="redType(this)">歌舞</li>
                <li onclick="redType(this)">短片</li><li onclick="redType(this)">纪录片</li>
                <li onclick="redType(this)">戏曲</li><li onclick="redType(this)">音乐</li>
                <li onclick="redType(this)">灾难</li><li onclick="redType(this)">青春</li>
                <li onclick="redType(this)">儿童</li><li onclick="redType(this)">其他</li>
            </ul>
        </div>
        <div class="fe">
            <div>区域：</div>
            <ul class="ul2">
                <li class="quan2" onclick="redRegion(this)">全部</li><li onclick="redRegion(this)">大陆</li>
                <li onclick="redRegion(this)">美国</li><li onclick="redRegion(this)">韩国</li>
                <li onclick="redRegion(this)">日本</li><li onclick="redRegion(this)">中国香港</li>
                <li onclick="redRegion(this)">泰国</li><li onclick="redRegion(this)">印度</li>
                <li onclick="redRegion(this)">法国</li><li onclick="redRegion(this)">英国</li>
                <li onclick="redRegion(this)">俄罗斯</li><li onclick="redRegion(this)">意大利</li>
                <li onclick="redRegion(this)">西班牙</li><li onclick="redRegion(this)">德国</li>
                <li onclick="redRegion(this)">波兰</li><li onclick="redRegion(this)">澳大利亚</li>
                <li onclick="redRegion(this)">伊朗</li><li onclick="redRegion(this)">其他</li>
            </ul>
        </div>
        <div class="fe">
            <div>年代：</div>
            <ul class="ul3">
                <li class="quan3" onclick="redAge(this)">全部</li><li onclick="redAge(this)">2029</li>
                <li onclick="redAge(this)">2028</li><li onclick="redAge(this)">2027</li>
                <li onclick="redAge(this)">2026</li><li onclick="redAge(this)">2025</li>
                <li onclick="redAge(this)">2024</li><li onclick="redAge(this)">2023</li>
                <li onclick="redAge(this)">2022</li><li onclick="redAge(this)">2021</li>
                <li onclick="redAge(this)">2020</li><li onclick="redAge(this)">2019</li>
                <li onclick="redAge(this)">2018</li><li onclick="redAge(this)">2017</li>
                <li onclick="redAge(this)">2016</li><li onclick="redAge(this)">2015</li>
                <li onclick="redAge(this)">2014</li><li onclick="redAge(this)">2013</li>
                <li onclick="redAge(this)">2012</li><li onclick="redAge(this)">2011</li>
                <li onclick="redAge(this)">2000</li><li onclick="redAge(this)">90年代</li>
                <li onclick="redAge(this)">80年代</li><li onclick="redAge(this)">70年代</li>
                <li onclick="redAge(this)">更早</li>
            </ul>
        </div>
    </div>
<c:set var="px" value="${sessionScope.px}"></c:set>
    <div>
        <c:if test="${px==1}">
            <p id="px">
                <input type="radio" class="pxNum" name="px" value="1" onclick="jQuery:window.location='${path}/MovieFlServlet?prom=show&px=1'"checked><span>按热门排序</span>
                <input type="radio" class="pxNum" name="px" value="2" onclick="jQuery:window.location='${path}/MovieFlServlet?prom=show&px=2'"><span>按间时排序</span>
                <input type="radio" class="pxNum" name="px" value="3"onclick="jQuery:window.location='${path}/MovieFlServlet?prom=show&px=3'"><span>按评价排序</span>
            </p>
        </c:if>
        <c:if test="${px==2}">
            <p id="px">
                <input type="radio" class="pxNum" name="px" value="1" onclick="jQuery:window.location='${path}/MovieFlServlet?prom=show&px=1'"><span>按热门排序</span>
                <input type="radio" class="pxNum" name="px" value="2" onclick="jQuery:window.location='${path}/MovieFlServlet?prom=show&px=2'"checked><span>按间时排序</span>
                <input type="radio" class="pxNum" name="px" value="3"onclick="jQuery:window.location='${path}/MovieFlServlet?prom=show&px=3'"><span>按评价排序</span>
            </p>
        </c:if>
        <c:if test="${px==3}">
            <p id="px">
                <input type="radio" class="pxNum" name="px" value="1" onclick="jQuery:window.location='${path}/MovieFlServlet?prom=show&px=1'"><span>按热门排序</span>
                <input type="radio" class="pxNum" name="px" value="2" onclick="jQuery:window.location='${path}/MovieFlServlet?prom=show&px=2'"><span>按间时排序</span>
                <input type="radio" class="pxNum" name="px" value="3"onclick="jQuery:window.location='${path}/MovieFlServlet?prom=show&px=3'"checked><span>按评价排序</span>
            </p>
        </c:if>
    </div>
    <div id="dian" style="position:relative;height: 100%;">
        <c:set var="MovieList" value="${sessionScope.MovieList}"/>
        <c:choose>
            <c:when test="${empty MovieList }">
                <script>window.location="${path}/MovieFlServlet?prom=show&px=1";</script>
            </c:when>
            <c:otherwise>
                <c:forEach items="${MovieList}" var="movie">
                    <ul id="${movie.movie_id}" class="mv">
                        <li><a href="${path}/MovieFlServlet?prom=select&movie_id=${movie.movie_id}"><img class="movieImage" src="${path}/images/moviePicture/${movie.movie_picture}" id="tu"></a></li>
                        <li>${movie.movie_cn_name}</li>
                        <li id="fen">
                            <c:if test="${movie.movie_score!='0.0'}">${movie.movie_score}</c:if>
                            <c:if test="${movie.movie_score=='0.0'}">暂无评分</c:if>
                        </li>
                    </ul>
                </c:forEach>
            </c:otherwise>
        </c:choose>
        <div id="page">
            <%--            <p>当前页数：[/${pages.totalPageCount}]--%>
            <c:if test="${sessionScope.pages.currPageNo>1}">
                <form method="post" action="${path}/MovieFlServlet?prom=show&pageIndex=${pages.currPageNo-1}&px=${px}">
                    <input type="submit" value="上一页" class="n1" >
                </form>
            </c:if>
            <c:if test="${pages.currPageNo==1}">
                <form method="post" action="${path}/MovieFlServlet?prom=show&pageIndex=1&px=${px}">
                    <input style="background-color: red;color: white"  class="numbers" type="submit" value="1" class="n1">
                </form>
                <form   method="post" action="${path}/MovieFlServlet?prom=show&pageIndex=2&px=${px}">
                    <input class="numbers" type="submit" value="2" class="n1">
                </form>
            </c:if>
            <c:if test="${pages.currPageNo==2}">
                <form method="post" action="${path}/MovieFlServlet?prom=show&pageIndex=1&px=${px}">
                    <input class="numbers" type="submit" value="1" class="n1">
                </form>
                <form   method="post" action="${path}/MovieFlServlet?prom=show&pageIndex=2&px=${px}">
                    <input  style="background-color: red;color: white"  class="numbers" type="submit" value="2" class="n1">
                </form>
            </c:if>
            <c:if test="${sessionScope.pages.currPageNo<sessionScope.pages.totalPageCount}">
                <form method="post" action="${path}/MovieFlServlet?prom=show&pageIndex=${pages.currPageNo+1}&px=${px}">
                    <input type="submit" value="下一页" class="n1">
                </form>
            </c:if>
            </p>
        </div>
    </div>
<script>
    function redType(type) {
        $(".ul1 li").css({"background-color":"white","color":"black"});
        // $("#quan1").css("color","black");
        $(type).css({"background-color":"#ef4238","color":"white"});
    }
    function redRegion(region) {
        $(".ul2 li").css({"background-color":"white","color":"black"});
        // $("#quan2").css("color","black");
        $(region).css({"background-color":"#ef4238","color":"white"});
    }
    function redAge(age) {
        $(".ul3 li").css({"background-color":"white","color":"black"});
        // $("#quan3").css("color","black");
        $(age).css({"background-color":"#ef4238","color":"white"});
    }
</script>
</body>
</html>
